<template>
  <div class="role-authorization">
    <je-panel>
      <je-panel-item region="left" v-bind="options3.left">
        <je-panel>
          <je-panel-item><component :is="leftComponent"></component></je-panel-item>
          <je-panel-item region="tbar" v-bind="leftOptions.tbar">
            <Je-toolbar>
              <je-tabs v-model:activeKey="leftComponent">
                <je-tab-pane key="Role">
                  <template #tab>
                    <span>
                      <i class="fal fa-user"></i>
                      {{ $t('left.role') }}
                    </span>
                  </template>
                </je-tab-pane>
                <je-tab-pane v-if="routerPath != '/threeMemberManagement'" key="Departmente">
                  <template #tab>
                    <span>
                      <i class="fal fa-building"></i>
                      {{ $t('left.department') }}
                    </span>
                  </template>
                </je-tab-pane>
                <je-tab-pane v-if="routerPath != '/threeMemberManagement'" key="Organization">
                  <template #tab>
                    <span>
                      <i class="fal fa-landmark"></i>
                      {{ $t('left.organization') }}
                    </span>
                  </template>
                </je-tab-pane>
                <je-tab-pane
                  v-if="JE_SAAS_ENABLE != '1' && routerPath != '/threeMemberManagement'"
                  key="PermissionGroup"
                >
                  <template #tab>
                    <span>
                      <i class="fal fa-user-friends"></i>
                      {{ $t('left.permissionGroup') }}
                    </span>
                  </template>
                </je-tab-pane>
                <je-tab-pane
                  v-if="isShowDeveloper && routerPath != '/threeMemberManagement'"
                  key="Developer"
                >
                  <template #tab>
                    <span>
                      <i class="fal fa-user-cog"></i>
                      {{ $t('left.developer') }}
                    </span>
                  </template>
                </je-tab-pane>
              </je-tabs>
            </Je-toolbar>
          </je-panel-item>
        </je-panel>
      </je-panel-item>
      <je-panel-item>
        <je-tabs v-model:activeKey="defaultComponent">
          <je-tab-pane key="Account">
            <template #tab>
              <span>
                <i class="fal fa-save"></i>
                {{ $t('default.account') }}
              </span>
            </template>
            <Account :role-id="id" :type="type" :node-type="nodeType" :exclude-flag="excludeFlag" />
          </je-tab-pane>
          <je-tab-pane key="Permission">
            <template #tab>
              <span>
                <i class="jeicon jeicon-seal"></i>
                {{ $t('default.permission') }}
              </span>
            </template>
            <Permission
              :role-id="id"
              :type="type"
              :node-type="nodeType"
              :exclude-flag="excludeFlag"
            />
          </je-tab-pane>
        </je-tabs>
        <!-- <i>{{ $t('default.title') }}</i> -->
      </je-panel-item>
    </je-panel>
  </div>
</template>

<script>
  import {
    defineAsyncComponent,
    defineComponent,
    onMounted,
    onUnmounted,
    reactive,
    ref,
    watch,
  } from 'vue';

  import { Panel, Toolbar } from '@jecloud/ui';

  import { Tabs } from 'ant-design-vue';

  import VueEvent from '@/helper/model/event';

  import Account from './account/index.vue';

  import Permission from './permission/index.vue';

  import { loadDevelopTabApi } from '@/api';
  import { getSystemConfig } from '@jecloud/utils';
  import { useJE } from '@common/helper/je';

  export default defineComponent({
    name: 'ThreeMemberManagement',
    components: {
      Role: defineAsyncComponent(() => import('./role/index.vue')),
      Account,
      Permission,
      JePanel: Panel,
      JePanelItem: Panel.Item,
      JeToolbar: Toolbar,
      JeTbFill: Toolbar.Fill,
      JeTabs: Tabs,
      JeTabPane: Tabs.TabPane,
    },
    setup() {
      let { $router } = useJE();
      const routerPath = ref($router?.currentRoute.value.path || '/roleAuthority');
      /* watch(
        () => $router?.currentRoute.value,
        (val) => {
          routerPath.value = val.path;
        },
        {
          deep: true,
        },
      ); */
      // 是否开启Saas模式
      const JE_SAAS_ENABLE = getSystemConfig('JE_SAAS_ENABLE');
      // 最外panel的default区域
      const defaultComponent = ref('Account');
      // 左侧panel的default区域
      const leftComponent = ref('Role');

      // 最外panel的样式
      const options3 = reactive({
        left: {
          split: true,
          size: 430,
          minSize: 430,
          // maxSize: 650,
          style: {
            // borderRight: '1px solid #e6e6e6',
            // borderBottom: '1px solid #e6e6e6',
          },
        },
        // tabr样式
        tbar: {
          size: 40,
          style: {
            backgroundColor: '#F7F9FC',
            padding: ' 0 16px',
            borderRight: '1px solid #e6e6e6',
          },
        },
      });
      // 左侧panel样式
      const leftOptions = reactive({
        // tabr样式
        tbar: {
          size: 40,
          style: {
            backgroundColor: '#F7F9FC',
            padding: ' 0 16px',
            borderRight: '1px solid #e6e6e6',
          },
        },
      });

      // 监听leftComponent，改变default样式
      watch(
        () => leftComponent.value,
        (nv) => {
          if (nv === 'PermissionGroup' || nv === 'Departmente' || nv === 'Organization') {
            defaultComponent.value = 'Permission';
          }
          VueEvent.emit('cleanData');
          VueEvent.emit('leftComponent', nv);
        },
      );

      let type = ref(null); // 类型：角色还是文件
      let id = ref(null);
      let nodeType = ref(null); // 类型：组织，部门还是开发者
      const showAccountEvent = ({ _type, _id, _nodeType }) => {
        debugger;
        type.value = _type;
        id.value = _id;
        nodeType.value = _nodeType;
      };

      // 自主控制权限
      const excludeFlag = ref(false);
      const excludeFlagEvent = (val) => {
        excludeFlag.value = val;
      };

      // 是否显示开发者
      const isShowDeveloper = ref(false);
      const isShowDeveloperEvent = () => {
        loadDevelopTabApi().then((res) => {
          isShowDeveloper.value = res;
        });
      };
      onMounted(() => {
        isShowDeveloperEvent();
      });

      VueEvent.on('showAccount', showAccountEvent);
      VueEvent.on('changeExclude', excludeFlagEvent);
      onUnmounted(() => {
        VueEvent.off('showAccount', showAccountEvent);
        VueEvent.off('changeExclude', excludeFlagEvent);
      });

      return {
        options3,
        defaultComponent,
        leftComponent,
        leftOptions,
        type,
        id,
        nodeType,
        excludeFlag,
        isShowDeveloper,
        JE_SAAS_ENABLE,
        routerPath,
      };
    },
  });
</script>

<style lang="less" scoped>
  .role-authorization {
    :deep(.je-panel-item-region-default .ant-tabs-nav-wrap) {
      padding-left: 16px;
      height: 39.5px;
      border-bottom: 1px solid #ffffff !important;
    }
    :deep(.ant-tabs-top) {
      height: 100% !important;
    }
    :deep(.ant-tabs-top > .ant-tabs-nav) {
      margin: 0 0 0 0 !important;
    }

    width: 100%;
    font-size: 14px;
    color: #7f7f7f;
    .jeicon {
      font-size: 14px;
      font-weight: 300;
      font-family: 'Font Awesome 5 Pro';
    }
    .fal {
      font-size: 14px;
      font-weight: 300;
      //font-family: 'Font Awesome 5 Pro';
    }
    :deep(.ant-tabs-top) {
      height: 47px;
    }
    :deep(.je-toolbar .ant-tabs-top > .ant-tabs-nav .ant-tabs-ink-bar) {
      bottom: 4.5px;
    }
    :deep(.je-panel-item-region-default .ant-tabs-top > .ant-tabs-nav .ant-tabs-ink-bar) {
      position: absolute;
      bottom: 0 !important;
    }
    :deep(.ant-select-selection-search-input) {
      border-color: #e6e6e6;
    }
    :deep(.ant-input-affix-wrapper.ant-select-selection-search-input) {
      border-radius: 0 !important;
      &:hover {
        box-shadow: none !important;
        border-radius: 0;
        border-color: #5c8dff;
      }
    }
    :deep(.ant-input-affix-wrapper-focused.ant-select-selection-search-input) {
      box-shadow: none !important;
      border-radius: 0;
    }
  }
</style>
